<template>
  <div class="article-detail">
    <div class="container">
      <img class="bg" :src="form.image" alt="">
      <div class="info">
        <p class="info-title">{{ form.title }}</p>
        <div class="info-summary">{{ form.summary }}</div>
        <div class="info-item"><span class="icon-limit"></span> 活动报名人数限额：<strong>{{
            form.registerLimit
          }}</strong></div>
        <div class="info-item"><span class="icon-limit"></span>
          活动报名时间：<strong>{{ formatDateTime(form.registerStartTime) }} /
            {{ formatDateTime(form.registerEndTime) }}</strong>
        </div>
        <div class="info-item"><img class="icon" src="../assets/img/time.png" alt="">
          时间：<strong>{{ formatDateTime(form.activityStartTime) }} /
            {{ formatDateTime(form.activityEndTime) }}</strong>
        </div>
        <div class="info-item"><img class="icon" src="../assets/img/activityLocation.png" alt="">
          地点：<strong>{{ form.activityLocation }}</strong>
        </div>
        <div class="info-item"><img class="icon" src="../assets/img/activityOrg.png" alt="">
          举办方：<strong>{{ form.activityOrg }}</strong></div>
        <div class="divider"></div>
      </div>
      <div class="content">
        <div class="content-title">活动详情</div>
        <div class="content-html" v-html="form.content"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {getActivityDetail} from '@/api/article'
import {initWechatSDK} from "@/utils/wechat";

export default {
  name: 'ActivityDetail',
  data() {
    return {
      product: {},
      showDetail: false,
      showSpecs: false,
      loading: false,
      contentId: this.$route.params.id || null,
      form: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      if (!this.contentId) {
        return
      }
      let data = await getActivityDetail({activityId: this.contentId})
      this.form = data.data
      await this.initWechatShare()
    },
    async initWechatShare() {
      try {
        await initWechatSDK({
          shareConfig: {
            title: this.form.title,
            desc: '新华新消费',
            link: window.location.href,
            imgUrl: 'https://xinxf.oss-cn-hangzhou.aliyuncs.com/resources/logo.png'
          }
        })
        console.log('微信分享功能已初始化')
      } catch (error) {
        console.error('初始化微信分享失败:', error)
      }
    },
    formatDateTime(inputDateTime) {
      const date = new Date(inputDateTime);
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${month}.${day} ${hours}:${minutes}`;
    }
  }
}

</script>
<style scoped lang="scss">
.container {
  .bg {
    width: 100%;
  }

  .info {
    position: relative;
    font-size: 13px; // 原 26rem -> 26px
    background: #ffffff;
    border-radius: 16px; // 原 32rem -> 32px
    top: -16px; // 原 -32rem
    color: #333333;
    padding: 16px; // 原 32rem

    .info-title {
      text-align: center;
      font-weight: bold;
      height: 24px; // 原 46rem
      line-height: 24px;
      font-size: 16px; // 原 32rem
      margin-bottom: 10px; // 原 18rem
      color: #001842;
    }

    .info-summary {
      line-height: 24px; // 原 46rem
      text-align: justify;
      margin-bottom: 6px; // 原 10rem
    }

    .info-item {
      margin-bottom: 10px; // 原 20rem
      display: flex;
      align-items: center;

      &:last-child {
        margin-bottom: 12px; // 原 24rem
      }

      .icon-limit {
        display: inline-block;
        width: 6px; // 原 10rem
        height: 6px;
        border: 4px solid #4578FF; // 原 8rem
        border-radius: 50%;
        margin-right: 4px; // 原 8rem
      }

      .icon {
        display: inline-block;
        width: 12px; // 原 26rem
        height: 12px;
        margin-right: 4px; // 原 8rem
      }
    }

    .divider {
      height: 1px; // 原 1rem
      width: 100%;
      background: #DCDFE2;
      margin-right: 12px; // 原 24rem
    }
  }

  .content {
    .content-title {
      font-weight: bold;
      font-size: 16px; // 原 32rem
      height: 24px; // 原 46rem
      line-height: 24px;
      text-align: center;
      color: #001842;
      margin-bottom: 12px; // 原 24rem
    }
  }

  .content-html {
    ::v-deep {
      img {
        max-width: 100% !important;
        height: auto !important;
      }

      p {
        font-size: 13px; // 原 26rem
        line-height: 24px; // 原 48rem
        color: #333333;
        text-align: justify;
      }
    }
  }
}

</style>